<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="playArea">play</p>
    <p @click="clearArea">clear</p>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import {ref} from "vue";

export default {
  name: "AddAreaTool.component",
  components: {Maptalks},
  setup() {

    let areaTool = ref(null), mapStore = ref(null)

    const clearArea = () => {
      areaTool.value.clear()
    }
    const playArea = () => {
      areaTool.value = new maptalks.AreaTool({
        // "once": true,
        "symbol": {
          "lineColor": "#1bbc9b",
          "lineWidth": 2,
          "polygonFill": "#f00",
          "polygonOpacity": 0.3
        },

        "vertexSymbol": {
          "markerType": "ellipse",
          "markerFill": "#eee608",
          "markerLineColor": "#1bbc9b",
          "markerLineWidth": 3,
          "markerWidth": 10,
          "markerHeight": 10
        },

        "labelOptions": {
          "textSymbol": {
            "textFaceName": "monospace",
            "textFill": "#fff",
            "textLineSpacing": 1,
            "textHorizontalAlignment": "right",
            "textDx": 15
          },
          "boxStyle": {
            "padding": [6, 2],
            "symbol": {
              "markerType": "square",
              "markerFill": "#000",
              "markerFillOpacity": 0.9,
              "markerLineColor": "#b4b3b3"
            }
          }
        },

        "clearButtonSymbol": [
          {
            "markerType": "square",
            "markerFill": "#000",
            "markerLineColor": "#b4b3b3",
            "markerLineWidth": 2,
            "markerWidth": 15,
            "markerHeight": 15,
            "markerDx": 22
          }, {
            "markerType": "x",
            "markerWidth": 10,
            "markerHeight": 10,
            "markerLineColor": "#fff",
            "markerDx": 22
          }
        ],

        "language": ""
      }).addTo(mapStore.value);
    }

    let mapOnLoadCB = (map) => {
      mapStore.value = map
    };

    return {
      mapOnLoadCB,
      clearArea, playArea
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}

</style>
